<template>
  <div>
    <canvas ref="canvasRef" width="800" height="600"
            :style="{ cursor: currentMode === 'eraser' ? 'cell' : 'crosshair' }"
            @mousedown="startDrawing"
            @mousemove="draw"
            @mouseup="stopDrawing"
            @mouseleave="stopDrawing"></canvas>
    <div>
      <button @click="setMode('pen')" :class="{ active: currentMode === 'pen' }">画笔</button>
      <button @click="setMode('eraser')" :class="{ active: currentMode === 'eraser' }">橡皮擦</button>
      <label>颜色: <input type="color" v-model="penColor" :disabled="currentMode === 'eraser'"></label>
      <label>粗细: <input type="range" min="1" max="20" v-model="penWidth"></label>
      <button @click="clearCanvas">清空</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';

const canvasRef = ref<HTMLCanvasElement | null>(null);
const context = ref<CanvasRenderingContext2D | null>(null);
const isDrawing = ref(false);
const penColor = ref('#000000');
const penWidth = ref(2);
const currentMode = ref<'pen' | 'eraser'>('pen');
const backgroundColor = '#FFFFFF';

onMounted(() => {
  const canvas = canvasRef.value;
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  if (!ctx) return;
  context.value = ctx;

  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
});

const setMode = (mode: 'pen' | 'eraser') => {
  currentMode.value = mode;
};

const startDrawing = (event: MouseEvent) => {
  if (!context.value) return;
  isDrawing.value = true;
  context.value.strokeStyle = currentMode.value === 'eraser' ? backgroundColor : penColor.value;
  context.value.lineWidth = penWidth.value;
  context.value.lineCap = 'round';
  context.value.lineJoin = 'round';
  context.value.beginPath();
  context.value.moveTo(event.offsetX, event.offsetY);
};

const draw = (event: MouseEvent) => {
  if (!isDrawing.value || !context.value) return;
  context.value.strokeStyle = currentMode.value === 'eraser' ? backgroundColor : penColor.value;
  context.value.lineTo(event.offsetX, event.offsetY);
  context.value.stroke();
};

const stopDrawing = () => {
  if (!context.value) return;
  if (isDrawing.value) {
      context.value.closePath();
      isDrawing.value = false;
  }
};

const clearCanvas = () => {
  if (!context.value || !canvasRef.value) return;
  context.value.fillStyle = backgroundColor;
  context.value.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height);
};

// 暴露获取图像数据的方法
defineExpose({
  getCanvasDataURL: () => {
    const canvas = canvasRef.value;
    if (!canvas) {
        console.error('Canvas not available');
        return undefined;
    }
    return canvas.toDataURL('image/png');
  }
});

</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
  display: block;
  margin: 20px auto;
  background-color: white;
}
div > div {
  text-align: center;
  margin-top: 10px;
}
label, button {
  margin: 0 5px;
}
button.active {
  background-color: #eee;
  border-style: inset;
}
input[type="color"]:disabled {
  cursor: not-allowed;
}
</style>